<%@ page import="org.ualr.cpsc.server.Photo"%>
<%@ page import="org.ualr.cpsc.server.PhotoService" %>
<%@ page import="java.util.List"%>
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%!
final int WIDTH = 200;
final int HEIGHT = 150;
public String getImgTag(Photo photo) {
    int width = photo.getAspectWidth(WIDTH, HEIGHT);
    int height = photo.getAspectHeight(WIDTH, HEIGHT);
    String source = photo.getUrl();
    
    return "<img width=\""+width+"\" height=\""+height+"\" src=\""+source+"\" />";
}

public String getHref(Photo photo) {
    return getHref(photo, getImgTag(photo));
}

public String getHref(Photo photo, String htmlInside) {
    return "<a href=\""+photo.getUrl()+"\">"+htmlInside+"</a>";
}
%>
<%
    UserService service = UserServiceFactory.getUserService();
    User user = service.getCurrentUser();
    if (user == null) {
        response.sendRedirect(service.createLoginURL(request.getRequestURI()));
    }
    List<Photo> photos = PhotoService.getUserPhotos();
%>
<!doctype html>
<html>
<head>
<title><%= user.getNickname() %>'s Photos</title>
<link href="photos.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="titlebar">
        <div class="nickname"><%= user.getNickname() %></div>
        <div class="loglink"><a
            href="<%=service.createLogoutURL(request.getRequestURI())%>">Sign
            Out!</a></div>
    </div>
    <form action="/uploadimage" method="post"
        enctype="multipart/form-data">
        <div class="inputs">
            <div class="fileinputs">
                        <input name="image[]" id="images" type="file" class="file" multiple accept="image/jpeg, image/png, image/bmp, image/gif"/>
            	<div class="fakefile">
            		<button id="mybutton">Choose Files</button>
            	</div>
            </div>
            <input id="submitbutton" type="submit" value="Upload..." />
        </div>
    </form>
    <div id="filetext">
    </div>
    <div class="photos">
    <%
        for (Photo p : photos) {
    %>
    <%
        if (p.getUrl() != null) {
                String url = p.getUrl();
    %>
    <div class="photolink">
        <%= getHref(p) %>
    </div>
    <%
        }
    %>
    <%
        }
    %>
    </div>
    <script type="text/javascript">
    function $(id) {
    	return document.getElementById(id);
    }
    var imagesElem = $("images");
    var textElem = $("filetext");
    images.addEventListener("change", function(event) {
    	var text = "";
    	if (imagesElem.files) {
    		var files = imagesElem.files;
    		for (var i = 0; i < files.length; i++) {
    			text += "<div class='filename'>"+files[i].fileName+"</div>";
    		}
    	} else {
    		text = "<div class='filename'>"+imagesElem.value+"</div>";
    	}
    	textElem.innerHTML = text;
    });
    </script>
</body>
</html>